"use client"

import Image from "next/image";
import {RiBox1Line, RiMailFill, RiSearch2Line, RiSendPlane2Line} from "react-icons/ri";
import Link from "next/link";
import News from "@/constant/News";
import EmptyLine from "@/components/EmptyLine";
import {AiOutlineArrowRight} from "react-icons/ai";
import BottomLinkSection from "@/components/BottomLinkSection";

const histories = [
    {
        id: '1',
        cover: '/images/history/gusongshan.jpg',
        title: '历史事件1',
        content: '寺山镇，隶属于广西壮族自治区来宾市兴宾区，地处兴宾区东南部，东与南泗乡及武宣县禄新乡接壤，南与石牙乡毗连，西与蒙村镇和三五乡为邻，北与蒙村镇交界。 [3]区域面积196.8平方千米，截至2019年末，户籍人口63520人。 [2]民国二十六年（1937年），设寺脚乡。1950年，称寺脚区。1968年，称寺山公社。1984年，称寺山乡至今。 [3]2014年，撤乡改镇。 [1]截至2020年6月，寺山镇下辖1个社区和16个行政村。 [4]2019年，寺山镇有工业企业53个，有营业面积超过50平方米以上的综合商店或超市13个。'
    },
    {
        id: '2',
        cover: '/images/history/lianhuashan.jpg',
        title: '广西鳌山布伢文化旅游景区',
        content: '广西来宾市兴宾区鳌山布伢文化旅游景区位于寺山乡陈王村委东1.7千米处，距来宾市区约30公里，面积约100公顷。该景区自然风光秀丽，景物得天独厚，人文景观奇特，泉丰林秀，是一处集自然风光与布伢文化瞻仰为主题、文化底蕴深厚的旅游景区。鳌山上的鳌山庙，素有“广东佛山，来宾鳌山”之美誉，影响极广。鳌山花婆庙每年都要举办两次庙会，一是农历三月初三日的花王节，二是农历六月初六日的花婆诞日，这两会祭祀规模最为盛大，当天景区人来车往，熙熙攘攘，热闹非凡。此外每年重阳节都举办登山活动。'
    },
    {
        id: '3',
        cover: '/images/history/niulanshan.jpg',
        title: '历史事件3',
        content: '这是历史事件3的详细内容。'
    },
    {
        id: '4',
        cover: '/images/history/niulanshan.jpg',
        title: '历史事件4',
        content: '这是历史事件4的详细内容。'
    }
];

console.log(histories);
export default function Page() {
    return (
        <div>
            <div className={"bg-gray-200 h-[200px] flex justify-center items-center custom-bg-line3"}>
                <span className={"text-3xl font-medium text-white "}>民 生 动 态</span>
            </div>
            <EmptyLine height={60} color={'white'}/>
            <div className={"max-w-7xl mx-auto px-4 relative"}>
                <div className={"grid grid-cols-12 gap-4"}>
                    <div className={"col-span-12 md:col-span-8 overflow-auto"}>
                        <div className={"text-xl font-bold mb-4"}>最新动态</div>
                        <div className={"flex flex-col gap-y-6"}>
                            {
                                News.map((item, index) => {
                                    return <Link href={`/news/detail?id=${item.id}`} key={index}
                                                 className={"gap-2 grid grid-cols-12 hover:text-blue-500"}>
                                        <div className={"col-span-12 md:col-span-3 rounded-md overflow-hidden w-full"}>
                                            <Image className={"w-full"} src={item.cover} alt={""} height={300} width={400}/>
                                        </div>
                                        <div className={"col-span-12 md:col-span-9 flex flex-col"}>
                                            <div className={"flex-1"}>
                                                <div>{item.title}</div>
                                                <div
                                                    className={"line-clamp-2 text-gray-500 text-sm"}>{item.content}</div>
                                            </div>
                                            <div className={"flex items-center gap-x-2 text-gray-400 text-xs"}>{item.createdAt} <div className={"h-[8px] w-[1px] bg-gray-200"}/> 浏览{item.viewNum}</div>
                                        </div>
                                    </Link>
                                })
                            }
                            <div className={"flex justify-center"}>
                                <div className={"px-3 py-1 rounded-full border border-gray-400 text-xs my-4 cursor-pointer"}>加载更多</div>
                            </div>
                        </div>
                    </div>
                    <div className={"hidden md:block md:col-span-4 sticky top-0"}>
                        <div className={"text-xl font-bold mb-4"}>便民工具</div>
                        <div className={"border border-gray-200 rounded-xl py-3 px-4"}>
                            <div className={"flex justify-between items-center"}>
                                <span>
                                    节日活动
                                </span>
                                <AiOutlineArrowRight />
                            </div>
                            <div className={"flex justify-between mt-4"}>
                                <span className={"line-clamp-1 text-sm"}>2024年元旦露天电影《我和我的家乡》 </span><span
                                className={"bg-blue-500/20 rounded-xl py-1 px-2 text-[10px]"}>最新</span>
                            </div>
                            <Link href={'#'} className={"flex justify-between mt-1"}>
                                <span className={"line-clamp-1 text-sm"}>国庆节免费电影安排，需要自带板凳 </span>
                            </Link>
                            <Link href={"#"} className={"flex justify-between mt-1"}>
                                <span className={"line-clamp-1 text-sm"}>中秋节月饼发放通知 </span>
                            </Link>
                            <Link href={'#'} className={"flex justify-between mt-1"}>
                                <span className={"line-clamp-1 text-sm"}>6月6鳌山景区开放通知 </span>
                            </Link>
                            <Link href={'#'} className={"flex justify-between mt-1"}>
                                <span className={"line-clamp-1 text-sm"}>3月3庙会，这些事一定要注意 </span>
                            </Link>
                        </div>

                        <div className={"border border-gray-200 rounded-xl py-3 px-4 mt-4"}>
                            <div className={"flex justify-between items-center"}>
                                <span>
                                    教育学习
                                </span>
                                <AiOutlineArrowRight />
                            </div>
                            <div className={"flex justify-between mt-4"}>
                                <span className={"line-clamp-1 text-sm"}>寺山镇中心小学招生计划</span><span
                                className={"bg-blue-500/20 rounded-xl py-1 px-2 text-[10px]"}>最新</span>
                            </div>
                            <Link href={'#'} className={"flex justify-between mt-1"}>
                                <span className={"line-clamp-1 text-sm"}>寒假放假通知</span>
                            </Link>
                            <Link href={"#"} className={"flex justify-between mt-1"}>
                                <span className={"line-clamp-1 text-sm"}>暑期文娱活动，仅限本镇中小学生..</span>
                            </Link>
                            <Link href={'#'} className={"flex justify-between mt-1"}>
                                <span className={"line-clamp-1 text-sm"}>暑期安全，家长们需要知道这几件事</span>
                            </Link>
                            <Link href={'#'} className={"flex justify-between mt-1"}>
                                <span className={"line-clamp-1 text-sm"}>喜报：2023年地区重点高中名单公布</span>
                            </Link>
                        </div>
                        <div className={"border border-gray-200 rounded-xl py-3 px-4 mt-4"}>
                            <div className={"flex justify-between items-center"}>
                                <span>
                                    卫生医疗
                                </span>
                                <AiOutlineArrowRight />
                            </div>
                            <div className={"flex justify-between mt-4"}>
                                <span className={"line-clamp-1 text-sm"}>寺山镇中心小学招生计划</span><span
                                className={"bg-blue-500/20 rounded-xl py-1 px-2 text-[10px]"}>最新</span>
                            </div>
                            <Link href={'#'} className={"flex justify-between mt-1"}>
                                <span className={"line-clamp-1 text-sm"}>这几个饮食习惯可以让您远离癌症</span>
                            </Link>
                            <Link href={"#"} className={"flex justify-between mt-1"}>
                                <span className={"line-clamp-1 text-sm"}>寺山镇开展中老年人免费测量血压</span>
                            </Link>
                            <Link href={'#'} className={"flex justify-between mt-1"}>
                                <span className={"line-clamp-1 text-sm"}>小阳人，请收好这些康复宝典</span>
                            </Link>
                            <Link href={'#'} className={"flex justify-between mt-1"}>
                                <span className={"line-clamp-1 text-sm"}>新冠病毒疫情防控解除通知</span>
                            </Link>
                        </div>

                        <div className={"px-3 mt-4 bg-black/5 rounded-xl py-3"}>
                            <div className={"font-bold"}>意见箱</div>

                            <div className={"flex flex-col mt-2"}>
                                <div
                                    className={"flex items-center justify-between gap-x-2 hover:text-blue-500 cursor-pointer"}>
                                    <span className={"flex items-center gap-x-1"}>
                                        <RiBox1Line/>
                                        我们倾听，您的声音重要！</span>
                                    <RiSendPlane2Line/>
                                </div>

                            </div>
                        </div>


                    </div>
                </div>
            </div>
            <EmptyLine height={60} color={'white'}/>
            <EmptyLine height={1} className={"my-2 bg-gray-300"}/>
            <BottomLinkSection />
        </div>
    )
}